<template>
  <div>
    <!-- 链动 -->
    <dhsHeader v-if="link" :type="orderStatus" :link="link"
              :Data="linkData"></dhsHeader>
    <dhsHeader v-else-if="replicate" :type="orderStatus" :replicate="replicate"
              :replicateData="replicateData"></dhsHeader>
    <dhsHeader :type="0"
              v-else
              :Data="headerData"></dhsHeader>
    <!-- tab -->
    <div class="daili-nav">
      <div class="aGroup">
        <div class="item-search" :class="is_hzdx_dhs_dz ? 'display-flex' : '' " v-if="!(orderStatus==1 && replicate == 3)">
          <search-box @search="search" :placeholder="Placeholder" v-model="keyWord"></search-box>
          <!--定制 得炫科技  增加时间选择器 start-->
          <div v-if="is_hzdx_dhs_dz"  class="datepicker">
            <div v-show="showDatepicker"  @click="clickDatepicker()">
            <span>时间选择器</span>
            <svg-icon class="icon" icon-class="icon_right" />
            </div>
            <div v-show="!showDatepicker">
              <span @click="clickDatepicker()">{{showDate}}</span>
              <span @click="deleteCurrentDate()"><svg-icon class="icon" icon-class="icon_delete" /></span>
            </div>
          </div>
          <!-- 定制 得炫科技 增加时间选择器 end -->
        </div>
        <!-- 链动 老板等级 筛选 -->
        <div v-if="link == 2 && orderStatus == 1">
          <scroll class="wrapper"
          ref="wrapper"
          :startX="0"
          :click="true"
          :scrollX="true"
          :scrollY="false"
          :eventPassthrough="'vertical'"
          >
            <div class="content">
              <van-button
                class="span"
                v-for="(item, index) in linkSelect"
                :key="index"
                @click="selectLinkItem(index, item.value)"
                :color="linkType == index ? '#F30C23' : '#999999'"
                plain
                hairline
                round
                type="primary"
              >
                <i>{{ item.name }}</i>
              </van-button>
            </div>
          </scroll>
        </div>
        <!-- 链动、三三复制不显示 -->
        <scroll class="wrapper wrapper-srcoll"
                v-if="!link && !replicate"
                ref="wrapper"
                :startX="0"
                :click="true"
                :scrollX="true"
                :scrollY="false"
                :eventPassthrough="'vertical'">
          <div class="content">
            <van-button class="span"
                        v-for="(item,index) in dhsGrade"
                        :key="index"
                        @click="selectItem(index,item.dhs_rank)"
                        :color="type == index ? '#F30C23':'#999999'"
                        plain
                        hairline
                        round
                        type="primary">
              <i>{{item.rank_name}}</i>
              <em>{{item.num||0}}</em>
            </van-button>
          </div>
        </scroll>
      </div>
    </div>

    <!-- 列表 -->
    <div class="user-list"
         v-show="list.length">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item clearfix" @click="linkToNextLevelVender('nextLevelVender',{nextLevelId:item.user_id})">
          <div class="levelimg fl release">
            <img :src="item.headimgurl"
                 v-if="item.headimgurl"
                 width="100%"
                 alt />
            <img :src="defaultPhotoImg"
                 v-else
                 width="100%"
                 alt />
            <!-- 链动 start -->
            <div class="icon-already" v-if="link && item.is_abandon && link == 2 &&  orderStatus == 1">已划走</div>
            <!-- 链动 end -->
          </div>
          <div class="levelinfo fl">
            <p>
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p>
              <span>用户ID：</span>
              <span>{{item.user_id}}</span>
            </p>
            <p v-if="item.mobile && is_hide_member_phone == 0">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <!-- 链动 start -->
            <template v-if="link && !(link ==3 && orderStatus == 1)">
              <p>
                <span>已获得佣金：</span>
                <span>{{ item.commission }}</span>
              </p>
              <p>
                <span>待结算佣金：</span>
                <span>{{ item.pre_commission }}</span>
              </p>
              <p v-if="item.develop_agent_num">
                <span>直推代理：</span>
                <span>{{ item.develop_agent_num }}</span>
              </p>
            </template>
              <template v-if="link && link == 2 &&  orderStatus == 1 && item.is_abandon == 0">
                <p style="width: 100%" v-if="item.origin_nickname">
                  <span>推荐人昵称：</span>
                  <span>{{ item.origin_nickname }}</span>
                </p>
                <p style="width: 100%" v-if="item.origin_mobile">
                  <span>推荐人手机：</span>
                  <span>{{item.origin_mobile}}</span>
                </p>
                <p style="width: 100%" v-if="item.origin_id">
                  <span>推荐人ID：</span>
                  <span>{{ item.origin_id }}</span>
                </p>
            </template>
            <!-- 链动 end -->
            <!-- 三三复制 start -->
            <template v-if="replicate">
              <div class="level-tips">
                <span v-if="item.is_current" class="current-prev">当前上级</span>
                <span v-if="item.is_level" class="level-now">平级</span>
                <span v-if="item.is_reference" class="reference">推荐人</span>
              </div>
              <p v-if="item.success_commission">
                <span>已获得佣金：</span>
                <span>{{ item.success_commission }}</span>
              </p>
              <p v-if="item.pre_commission">
                <span>待结算佣金：</span>
                <span>{{ item.pre_commission }}</span>
              </p>
              <p style="width: 100%" v-if="item.superior_info && item.superior_info.user_id">
                <template v-if="replicate == 2 && orderStatus == 3 || replicate == 3 && orderStatus == 2|| replicate == 2 && orderStatus == 5">
                  <span>来自推荐人：</span>
                </template>
                <template v-else-if="replicate == 2 &&  orderStatus == 4">
                  <span>当前上级：</span>
                </template>
                <span>{{ item.superior_info.user_id }}/{{ item.superior_info.nickname }}<template v-if="item.superior_info.mobile">/{{ item.superior_info.mobile }}</template></span>
              </p>
            </template>
            <!-- 三三复制 end -->
            <!-- 链动、三三复制不显示 -->
            <template v-if="!link && !replicate">
            <p>
              <span>地区：</span>
              <span>{{item.country}}{{item.province}}{{item.city}}</span>
            </p>
            <p>
              <span>级别：</span>
              <span>{{item.rank_name}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p>
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
            </template>
            <!-- 定制 得炫科技 增加团队业绩数量字段 start -->
            <template v-if="is_hzdx_dhs_dz">
              <p>
                <span>团队业绩：</span>
                <span>{{ item.dhs_team_achievement }}</span>
              </p>
            </template>
            <!-- 定制 得炫科技 增加团队业绩数量字段 end -->
            <p class="check_detail"
                 @click="Jump('myStore',{lowerId:item.user_id})" v-if="is_yj_dz">
                <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary">转移虚拟库存</van-button>
              </p>
            <!-- 链动 start -->
            <p class="check_detail send-left" v-if="link && !(link ==3 && orderStatus == 1)">
                <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary"
                  @click.stop="Jump('venderOrder',{type:'0', link: myRank, userId: item.user_id, type: myRank == 1 ? 1: orderStatus, settleType: '3'})">查看已收益明细</van-button>
                  <van-button  class="send-btn" color="#F30C23" plain hairline round type="primary"
                  @click.stop="Jump('venderOrder',{type:'0', link: myRank, userId: item.user_id, type: myRank == 1 ? 1: orderStatus, settleType: '1'})">查看待结算明细</van-button>
            </p>
            <!-- 链动 end -->
          </div>
        </div>
      </van-list>
    </div>
    <div v-show="!list.length">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import dhsHeader from '@/views/user/dhs/components/dhsHeader/index'
import noData from '@/components/noData/index'
import searchBox from '@/views/user/components/search/index'
import Scroll from '@/components/scroll/index'
import { getNextLevelVender } from '@/api/user/dhs/dhsApi'
import { chainingMember } from '@/api/user/link/index'
import { replicateMember } from '@/api/user/replicate/index'

import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      defaultPhotoImg: 'https://img.wifenxiao.com/h5-wfx/images/user/default_photo_img.jpg',
      is_hide_member_phone: undefined,
      noData: {
        text: '',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_agent_data.png',
        marginTop: '60px'
      },
      headerData: {
      },
      Placeholder: '',
      keyWord: '',
      dhsGrade: [],
      type: 0,
      p: 2,
      loading: false,
      finished: false,
      error: false,
      dhs_rank: '',
      list: [],
      is_yj_dz: false, // $_yj定制
      show_lower_dhs_detail: 0, // 是否开启：订货商中心-手机端下级订货商是否显示下级订货商信息
      nextLevelId: undefined, // 下级订货商id
      is_hzdx_dhs_dz: 0, // 得炫科技定制 时间选择展示
      orderStatus: 0,
      link: 0,
      myRank: 0,
      linkData: {
        levelNum: 0, // 平级推荐
        recommendNum: 0, // 直推代理
        superiorNum: 0 // 上级数量
      },
      linkSelect: [{
        name: '仅看直推',
        value: 1
      }],
      is_only_direct: '',
      linkType: -1,
      // 三三复制
      replicate: 0,
      myReplicate: 0,
      replicateData: []
    }
  },
  watch: {
    '$route.query.type': {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.orderStatus = newVal
          // 链动
          if (this.$route.query.link) {
            this.myRank = this.$route.query.link
            if (this.$route.query.link == 1) {
              this.link = 3
            } else if (this.$route.query.link == 2) {
              this.link = 2
            }
            this.orderStatus = this.$route.query.type
            wx.setNavigationBarTitle({
              title: ''
            })
          }
          if (this.$route.query.replicate) {
            this.myReplicate = this.$route.query.replicate
            if (this.$route.query.replicate == 1) {
              this.replicate = 3
            } else if (this.$route.query.replicate == 2) {
              this.replicate = 2
            }
            this.orderStatus = this.$route.query.type
            wx.setNavigationBarTitle({
              title: ''
            })
          }
          this.init()
          this.is_dz()
        }
      }
    },
    deep: true
  },
  created() {
     // 链动
    if (this.$route.query.link) {
      this.myRank = this.$route.query.link
      if (this.$route.query.is_only_direct == 1) {
        this.is_only_direct = 1
        this.linkType = 0
      }
      if (this.$route.query.link == 1) {
        this.link = 3
      } else if (this.$route.query.link == 2) {
        this.link = 2
      }
      this.orderStatus = this.$route.query.type
      wx.setNavigationBarTitle({
        title: ''
      })
    }
    // 三三复制
    if (this.$route.query.replicate) {
      this.myReplicate = this.$route.query.replicate
      if (this.$route.query.replicate == 1) {
        this.replicate = 3
      } else if (this.$route.query.replicate == 2) {
        this.replicate = 2
      }
      this.orderStatus = this.$route.query.type
      wx.setNavigationBarTitle({
        title: ''
      })
    }
    this.init()
    this.is_dz()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  },
  methods: {
    Jump(url, data) {
      this.$JumpPath(this, url, data,0)
    },
    // 点击下级订货商
    linkToNextLevelVender(url, data) {
      if (this.show_lower_dhs_detail == 1) {
        this.Jump(url, data)
      }
    },
    is_dz() {
      const shop = this.$route.query.sid
      const is_yj_dz = this.$_shop('$_yj', shop)
      this.is_yj_dz = is_yj_dz
    },
    init() {
      // this.list = []
      this.p = 2
      this.finished = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      this.nextLevelId = this.$route.query.nextLevelId
      const params = {
        p: 1,
        dhs_rank: this.dhs_rank,
        keyword: this.keyWord,
        nextLevelId: this.nextLevelId
      }
      // 得炫定制 时间传参
      if (this.is_hzdx_dhs_dz) {
        const search_time = this.showDate ? new Date(this.showDate.replace('-', '/')).getTime() : ''
        params.search_time = search_time
      }
      // 链动 start
      if (this.link) {
        const params = {
          p: 1,
          title: this.keyWord,
          type: this.orderStatus,
          is_only_direct: this.is_only_direct
        }
        chainingMember(params).then(res => {
          this.finished = false
          this.$loadingWrap.close()
          if (res.status == 1) {
            wx.setNavigationBarTitle({
              title: res.data.chaining_action_name || '链动成员'
            })
            this.linkData.levelNum = res.data.levelNum
            this.linkData.recommendNum = res.data.recommendNum
            this.linkData.superiorNum = res.data.superiorNum
            this.is_hide_member_phone = res.data.is_hide_member_phone
            // 头部和导航数据
            // 搜索
            this.Placeholder = `请输入会员ID/昵称`
            // 订货商等级数据
            this.list = res.data.list
            // 其它
            this.noData.text = `暂无${res.data.chaining_action_name}`
            if (!this.list.length) {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
            this.list = []
          }
        })
        return false
      }
      // 链动 end
      // 三三复制 start
      if (this.replicate) {
        const params = {
          p: 1,
          title: this.keyWord,
          type: this.orderStatus
        }
        this.replicateData = []
        replicateMember(params).then(res => {
          this.finished = false
          this.$loadingWrap.close()
          if (res.status == 1) {
            wx.setNavigationBarTitle({
              title: res.data.name_info.name_replicate_member || '复制成员'
            })
            this.replicateData = res.data.number_info
            // this.is_hide_member_phone = res.data.is_hide_member_phone
            this.is_hide_member_phone = 0
            // 头部和导航数据
            // 搜索
            this.Placeholder = `请输入会员ID/昵称`
            // 订货商等级数据
            this.list = res.data.list
            // 其它
            this.noData.text = `暂无${res.data.name_info.name_replicate_member}`
            if (!this.list.length) {
              this.finished = true
            }
          } else {
            this.$Error(res.msg)
          }
        })
        return false
      }
      // 三三复制 end
      getNextLevelVender(params).then(res => {
        this.finished = false
        this.$loadingWrap.close()
        if (res.status == 1) {
          if (!this.link && !this.replicate) {
            wx.setNavigationBarTitle({
              title: res.data.ftitle_dhs_user
            })
          }
          // 定制 得炫定制时间 start
          this.is_hzdx_dhs_dz = res.data.is_hzdx_dhs_dz || 0
          // 定制 得炫定制时间 start
          this.headerData = res.data
          this.is_hide_member_phone = res.data.is_hide_member_phone
          this.show_lower_dhs_detail = res.data.show_lower_dhs_detail
          // 头部和导航数据
          // 搜索
          this.Placeholder = `请输入${res.data.ftitle_dhs_user}ID/昵称`
          // 订货商等级数据
          this.dhsGrade = res.data.dhs_grade_num_detail
          this.list = res.data.user_list
          // 其它
          this.noData.text = `暂无${res.data.dhs_alias}`
          if (!this.list.length) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 定制 得炫科技 时间选择器 start
    clickDatepicker() {
      this.show = !this.show
    },
    onConfirm(a) {
      const getDate = this.timeFormat(a)
      this.currentDate = a
      this.showDate = getDate
      this.show = false
      this.showDatepicker = false
      // console.log(this.currentDate)
      this.init()
    },
    timeFormat(time) {
      const year = time.getFullYear()
      let mounth = time.getMonth() + 1
      mounth = mounth < 10 ? `0${mounth}` : mounth
      return year + '-' + mounth
    },
    deleteCurrentDate() {
      this.currentDate = ''
      this.showDate = ''
      this.showDatepicker = !this.showDatepicker
      this.init()
    },
    // 定制 得炫科技增加时间选择器  end
    onLoad() {
      const data = {
        p: this.p,
        dhs_rank: this.dhs_rank,
        nextLevelId: this.nextLevelId,
        keyword: this.keyWord
      }
      // 链动 start
      if (this.link) {
        const linkDataLoad = {
          p: this.p,
          title: this.keyWord,
          type: this.orderStatus,
          is_only_direct: this.is_only_direct
        }
        chainingMember(linkDataLoad).then(res => {
          this.loading = false
          if (res.data.list.length) {
            this.list = this.list.concat(res.data.list)
            this.p++
          } else {
            this.finished = true
          }
        }).catch(() => {
          this.error = true
        })
        return false
      }
      // 链动 end
      // 三三复制 start
      if (this.replicate) {
        const linkDataLoad = {
          p: this.p,
          title: this.keyWord,
          type: this.orderStatus
        }
        replicateMember(linkDataLoad).then(res => {
          this.loading = false
          if (res.data.list.length) {
            this.list = this.list.concat(res.data.list)
            this.p++
          } else {
            this.finished = true
          }
        }).catch(() => {
          this.error = true
        })
        return false
      }
      // 三三复制 end
      getNextLevelVender(data).then(res => {
        this.loading = false
        if (res.data.user_list.length) {
          this.list = this.list.concat(res.data.user_list)
          this.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    selectItem(index, dhs_rank) {
      if (this.type == index) return
      this.type = index
      this.dhs_rank = dhs_rank
      this.init()
    },
    selectLinkItem(index, value) {
      if (this.linkType == index) {
        this.linkType = -1
        this.is_only_direct = ''
      } else {
        this.linkType = index
        this.is_only_direct = value
      }
      // console.log(value)
      this.init()
    },
    search(e) {
      this.p = 1
      this.finished = false
      const data = {
        p: this.p,
        dhs_rank: this.dhs_rank,
        nextLevelId: this.nextLevelId,
        keyword: this.keyWord
      }
      this.$loadingWrap.show()
      // 链动 start
      if (this.link) {
        const params = {
          p: this.p,
          title: this.keyWord,
          type: this.orderStatus,
          is_only_direct: this.is_only_direct
        }
        // console.log('params', params)
        chainingMember(params).then(res => {
          this.loading = false
          wx.setNavigationBarTitle({
            title: res.data.chaining_action_name || '链动成员'
          })
          // 老板身份下的数据
          this.linkData.levelNum = res.data.levelNum
          this.linkData.recommendNum = res.data.recommendNum
          this.linkData.superiorNum = res.data.superiorNum
          this.is_hide_member_phone = res.data.is_hide_member_phone
          this.list = res.data.list
          if (res.data.list.length) {
            this.p++
          } else {
            this.finished = true
          }
          this.$loadingWrap.close()
      }).catch(() => {
          this.error = true
          this.$loadingWrap.close()
        })
        return false
      }
      // 链动 end
      // 三三复制 start
      if (this.replicate) {
        const params = {
          p: this.p,
          title: this.keyWord,
          type: this.orderStatus
        }
        replicateMember(params).then(res => {
          this.loading = false
          wx.setNavigationBarTitle({
            title: res.data.name_info.name_replicate_member || '复制成员'
          })
          this.replicateData = res.data.number_info
          this.list = res.data.list
          this.is_hide_member_phone = 0
          if (res.data.list.length) {
            this.p++
          } else {
            this.finished = true
          }
          this.$loadingWrap.close()
        }).catch(() => {
          this.error = true
          this.$loadingWrap.close()
        })
        return false
      }
      // 三三复制 end
      getNextLevelVender(data).then(res => {
        this.loading = false
        this.headerData = res.data
        this.dhsGrade = res.data.dhs_grade_num_detail
        this.list = res.data.user_list
        if (res.data.user_list.length) {
          this.p++
        } else {
          this.finished = true
        }
        this.$loadingWrap.close()
      }).catch(() => {
        this.error = true
        this.$loadingWrap.close()
      })
    }
  },
  components: {
    dhsHeader,
    noData,
    searchBox,
    Scroll
  }
})
</script>

<style lang="scss">
@import "src/styles/user/cardList/index.scss";
@import "src/styles/user/Group/index";
.daili-nav {
  border-top: 1px solid #ededed;
  padding: 20px 30px;
  background: #fff;
  .wrapper-srcoll{
    overflow-x: scroll;
  }
  scroll {
		-webkit-overflow-scrolling: touch;
	}
}
.send-left {
  display: flex;
  justify-content: space-around
}
.release {
  position: relative;
}
.icon-already {
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  bottom: 0;
  background: linear-gradient(270deg, #FFC930 1.16%, #FDE376 96.18%);
  color: #333;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  line-height: 36px;
}
.level-tips {
  position: absolute;
  top: -30px;
  right: -20px;
  span {
    border: 0;
    color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 20px;
    margin-left: 4px;
    &.current-prev {
      background: linear-gradient(270deg, #e46e6e 1.16%, #e4122b 96.18%);
    }
    &.level-now {
      background: linear-gradient(270deg, #ff9420 1.16%, #ffb669 96.18%);
    }
    &.reference {
      background: linear-gradient(270deg, #135e33 1.16%, #32905a 96.18%);
    }
  }
}

</style>
